import React, { useRef, FC, forwardRef, useImperativeHandle, useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import TableDefined from '@/components/common/tableDefined'
import Dynamic from '@/api/dynamic'
import { modalLayoutSm } from '@/config/layout'
import { Button, Input, DatePicker, Select, Modal, Cascader,Spin, Upload, Table, Form, Steps, Row, Col, Tabs, Card, Radio, message } from 'antd';
import MyDefineSelect from '@/components/common/myDefineSelect'
import $axios from '@/utils/axios';
import { fn } from 'moment'
import TableDefinedEditCom from '@/components/common/tableDefinedEdit'
const {Option} = Select;
const delApiid = 'DMT_MNG_02_03'
const DataBase: FC = () => {
  const tableRef: RefType = useRef()
  const AddComRef: RefType = useRef()
  const searchConfigList = [
    // {
    //   key: 'measureName',
    //   slot: <Input placeholder="请输入名称" allowClear />,
    //   rules: [],
    //   initialValue: ''
    // }
    
  ];
  
  // 新增按钮
  const AddBtn = () => (
    <Button className="fr" onClick={add} type="primary">
      新增
    </Button>
  )
  // 添加
  const add = () => {
    AddComRef.current.init()
  }
   // 添加
  const edit = (id) => {
    AddComRef.current.init(id);
  }
  // 删除
  const del = (id:any) => {
    Modal.confirm({
      title: '确认删除？',
      
      onOk() {
        // Role.roleDel({
        //   roleid:record.roleid,
        //   isFormData:true
        // }).then(()=>{
        //   tableRef.current.update();
        // })
        Dynamic.getDynamicQuery({
          apiID:delApiid,
          apiParam:{
            api_id:id
          }
        }).then((res)=>{
          tableRef.current.update();
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const columns = [
      {
        title: '操作',
        align: 'left',
        dataIndex: 'scan',
        key: 'scan',
        width: '150px',
        fixed: 'right',
        render: (text, record, index) => {
          return <div>
          <Button className="btn" onClick={()=>edit(record.api_id)} size="small">编辑</Button>
          <Button style={{marginLeft:'10px'}} className="btn" onClick={()=>del(record.api_id)} size="small">删除</Button>
        </div>
        }
      }
]
  return (
    <>
      <div style={{marginBottom:'15px'}}>
        {/* <BatchDel /> */}
        <AddBtn />
      </div>
      <div>
      <TableDefined
        apiFun={Dynamic.getDynamicQuery}
        columns={columns}
        ref={tableRef}
        searchConfigList={searchConfigList}
        extraProps={{ apiID: 'DMT_MNG_02',apiParam:{'orderBy':'api_id'} }}
      />
       <TableDefinedEditCom ref={AddComRef} 
         apiID="DMT_MNG_01"
         apiParamMng_id = "DMT_MNG_02_01"
        addApiId = 'DMT_MNG_02_01'
        updateApiId = 'DMT_MNG_02_02'
        detailApiId = 'DMT_MNG_02_04'
        callback={() => {
        tableRef.current.update();
      }} />
      </div>
       
    </>
  )
}
export default withRouter(DataBase)